<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 200px;
				height: 50px;
				margin: 0px auto;
				margin-top: 50px;
				border:2px solid aqua;
				position: relative;
				overflow: hidden;
			}
			.box ul{
				height: 250px;
				width: 200px;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.box ul li{
				width: 200px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-size: 24px;
				list-style: none;
				color: #fff;
			}
		</style>
		<script type="text/javascript">
			$(function(){

//				循环所有的box
				$('.box').each(function(){
//					获得原生js对象
					var jsThis = $(this)[0];
//					获取jq的this
					var jqThis = $(this);
//					总管变量
					jsThis.num = 0;
//					定时器函数
					jsThis.run= function(){
//						让当前对象里面的num自增
						jsThis.num++;
//						判断
						if(jsThis.num>4){
//							让当前box里面ul位置瞬间到达0
							jqThis.find('ul').css('top','0px');
//							让当前对象里面num=1
							jsThis.num=1;
						}
//						操作box里面ul位置
						jqThis.find('ul').animate({'top':-50*jsThis.num+'px'},300)
					}
//					给每个对象存入定时器
//				           设置定时器
					jsThis.timer = setInterval(jsThis.run,1000)
					
					console.log($(this))
				})
				
//				鼠标移入移出事件
				$('.box').hover(function(){
//					获取原生js对象
					var jsThis = $(this)[0]
//					清理定时器
					clearInterval(jsThis.timer)
				},function(){
//					获取原生js对象
					var jsThis = $(this)[0]
//					回复定时器
					jsThis.timer = setInterval(jsThis.run,1000)
				})
				
			})
		</script>
	</head>
	<body>
		<div class="box">
			<ul>
				<li style="background: red;">离离原上草</li>
				<li style="background: green;">一岁一枯荣</li>
				<li style="background: blue;">野火烧不尽</li>
				<li style="background: yellow;">春风吹又生</li>
				<li style="background: red;">离离原上草</li>
			</ul>
		</div>n
		<div class="box">
			<ul>
				<li style="background: red;">离离原上草</li>
				<li style="background: green;">一岁一枯荣</li>
				<li  style="background: blue;">野火烧不尽</li>
				<li  style="background: yellow;">春风吹又生</li>
				<li  style="background: red;">离离原上草</li>
			</ul>
		</div>
		<div class="box">
			<ul>
				<li style="background: red;">离离原上草</li>
				<li style="background: green;">一岁一枯荣</li>
				<li  style="background: blue;">野火烧不尽</li>
				<li  style="background: yellow;">春风吹又生</li>
				<li  style="background: red;">离离原上草</li>
			</ul>
		</div>
		<div class="box">
			<ul>
				<li style="background: red;">离离原上草</li>
				<li style="background: green;">一岁一枯荣</li>
				<li  style="background: blue;">野火烧不尽</li>
				<li  style="background: yellow;">春风吹又生</li>
				<li  style="background: red;">离离原上草</li>
			</ul>
		</div>
	</body>
</html>
